<template>
  <!--新增用户-->
  <div class="page">
    <el-form :model="addParams" ref="add-form" label-width="100px" align="left">
      <el-row>
        <el-col :span="12">
          <el-form-item label="资源名称" prop="realName">
            <el-input v-model="addParams.name" size="small" :maxlength="200"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源路由" prop="userName">
            <el-input v-model="addParams.url" size="small" :maxlength="200"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="资源顺序" prop="caseSwitch">
            <el-input v-model="addParams.resoSort" size="small" :maxlength="200"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源类型" prop="caseSwitch">
            <el-select v-model="addParams.type" clearable>
              <el-option v-for="{index,name,code} in $dict.getDictData('ResourceType')" :key="index" :label="name" :value="code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="资源父节点" prop="parentId">
            <el-input v-model="addParams.parentId" size="small" :maxlength="25"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <div class="confirm-button">
      <el-button @click="addUserCancel">取消</el-button>
      <el-button @click="addUserCommit">确定</el-button>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { namespace } from 'vuex-class';
import { Prop } from 'vue-property-decorator';

import { ResourceService } from "~/services/management-service/resource.service";

const systemManageModule = namespace('system-manage');

@Component({
  components: {},
})
export default class AddUser extends Vue {

  @Prop()
  private parentId: any;

  @Dependencies(ResourceService)
  private resourceService: ResourceService

  private addParams: any = {
    name: "",
    url: "",
    resoSort: "",
    type: "",
    parentId: this.parentId
  };


  /**
   * 新增用户确认
   */
  private addUserCommit() {
    const addForm: any = this.$refs['add-form'];
    this.resourceService.createResource(this.addParams).subscribe(
      (data) => {
        //   重置form表单xr
        const addForm: any = this.$refs['add-form'];
        addForm.resetFields();
        this.addParams.deptId = '';
        //   关闭dialog
        this.$emit('close');
        this.$message.success('新增资源成功!');
        //   刷新databox
        this.$emit('refresh');
      }
    );
  }

  /**
   * 新增用户取消
   */
  private addUserCancel() {
    //   重置form表单
    const addForm: any = this.$refs['add-form'];
    addForm.resetFields();
    this.addParams.deptId = '';
    //   关闭dialog
    this.$emit('close');
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.data-grid {
  margin-bottom: 10px;
}

.header {
  border: solid 1px #dee1e5;
  border-bottom: 0px;
  height: 40px;
  line-height: 40px;
}
</style>
